html { font-size: 14px; position: relative; min-height: 100%; }
body { padding: 0; margin: 0; min-height: 100%; background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", "Helvetica Neue", STHeiti, Tahoma, Simsun, Arial, Helvetica, Sans-serif; }
    body.lang-en { font-family: Arial, sans-serif !important; }

@media (min-width: 768px) { html {
    font-size: 16px;
  }
}

.container { max-width: 1200px; margin: 0 auto; }
.main{ min-height:600px; }

header{ z-index:999; }
.navbar { height: 66px; width: 100%; background-color: #fff; }
    .navbar .container { display:flex; }

    .navbar .logo{ margin-right:20px; padding-top:8px; margin-left:10px; }
        .navbar .logo img{ height:50px; }

        .menu-box { display: flex; flex-direction: row; width: 100%; padding-right: 20px; }
        .menu-box .menu-item a{ text-decoration:none; }
        .menu-box .menu-item { width: 20%; text-align: center; }
    .menu-box .menu-item > a{ display:inline-block; width:100%; height:66px; line-height:66px; font-size:16px; font-weight:bold; color:#333; }
        .menu-box .menu-item > a:hover, .menu-box .menu-item:hover > a, .menu-box .menu-item .current { background-color: #73DCFF; color: #fff; text-decoration: none; }

    .menu-box .menu-item { position:relative; }
        .menu-box .menu-item .menu-sub { display:none; }
            .menu-box .menu-item .menu-sub div{ width:100%; height:30px; }
            .lang-en .menu-sub div{ text-align:left !important; }
            .menu-box .menu-item .menu-sub a { color: #333; background-color: #fff; width: 100%; display: block; line-height: 30px; }
                .lang-en .menu-sub a { padding-left:20px; box-sizing:border-box; overflow:hidden; font-size:14px; }
.menu-box .menu-item .menu-sub a:hover { background-color: #73DCFF; color: #fff; text-decoration: none; }
.menu-box .menu-item:hover .menu-sub { display: block; position: absolute; left: 0; top: 66px; z-index: 9999; border: 1px solid #73DCFF; width: 100%; box-sizing: border-box; }

    .lang-switch { border-left: 1px solid #F0F0F0; padding-top:10px; background-color:#fff; position:relative; width:180px; height:56px; box-sizing:content-box; }
        .lang-switch .btn-group { display: flex; word-wrap: normal; flex-direction: row; font-size: 14px; line-height: 40px; color: #73DCFF; padding: 0 1em; cursor: pointer; }
            .lang-switch .btn-group span{ width:10px; height:40px; background:url(down-caret.png) center center no-repeat; margin-left:5px; }
            .lang-switch ul { list-style: none; padding: 0; margin: 0; position: absolute; left:0; top:50px; z-index:9999; background-color: #fff; width:100%; display:none; }
        .lang-switch:hover ul{ display:block; }
        .lang-switch li { line-height: 30px; width: 100%; }
        .lang-switch li a { display:block; color: #333; padding-left: 1em; line-height:30px; text-decoration:none; font-size:16px; }
            .lang-switch li a:hover { background-color: #73DCFF; color: #fff; text-decoration: none }

            .nav-btn{ width:44px; height:66px; margin-right:20px; display:none; cursor: pointer; }
                .nav-btn .navbar-toggler-icon{ display:inline-block; margin-top:11px; width:44px; height:44px; background:url(nav-menu.png) center center no-repeat; cursor: pointer; }

                .footer { width: 100%; background: url(footer-bg.jpg) top center no-repeat; padding-top: 1.5em; color: #fff; }
    .footer .links { display: flex; padding-bottom: 30px; }
    .footer .links .contact{flex:1; margin-right:50px; margin-left:20px; }
    .footer .links h2 { font-size: 18px; color: #fff; }
    .footer .links > div { width: 25%; font-size: 14px; line-height: 30px; }
    .footer .links p{ padding:0; margin:0; color:#fff; }

    .footer .links ul{ list-style:none; padding:0; margin:0; }
        .footer .links ul a { color: #fff; text-decoration: none; }
            .footer .links ul a:hover { text-decoration: underline; }
            .footer-copyright { text-align: center; color: #fff; font-size: 12px; padding:20px 0; line-height:20px; border-top:1px solid #fff; }
            .footer-copyright a{ color:#fff; text-decoration:none; }
                .footer-copyright p { margin:0; padding:0; line-height:20px; }
                .footer-copyright a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 800px) {
    .navbar .menu-box { display: none; }
    .navbar .lang-switch { display: none; }
    .navbar .nav-btn { display: block; cursor: pointer; }
    .navbar .logo { flex: 1; text-align: center; }
    .footer { background: url(footer-bg-mb.jpg) top center no-repeat; background-size: cover; }
}

.full-slide { width: 100%; }
.fullSlide { position: relative; margin: 0 auto; }
    .fullSlide * { zoom: 1 }
    .fullSlide ul{ list-style:none; padding:0; margin:0; }
    .fullSlide .bd { position: relative; z-index: 0; }
        .fullSlide .bd li img { width: 100%; vertical-align: top; }
    .fullSlide .hd { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index: 1; height: 30px; line-height: 30px; text-align: center; }
        .fullSlide .hd ul { display:flex; margin:0 auto; }
            .fullSlide .hd ul li { cursor: pointer; width: 16px; height: 16px; margin:0 10px; border:1px solid #fff; border-radius:50%;  overflow: hidden; font-size:0; }
            .fullSlide .hd ul .on { background-color:#fff; }

    .fullSlide .prev, .fullSlide .next { z-index: 1; display: block; width: 100px; height: 100%; position:absolute; left: 50px; top:0; background: url(../site/prev.png) left center no-repeat; filter: alpha(opacity=40); opacity: 0.4 }
    .fullSlide .next { background: url(../site/next.png) right center no-repeat; left:auto; right:50px; }
        .fullSlide .prev:hover, .fullSlide .next:hover { filter: alpha(opacity=80); opacity: 0.8 }

.net-bg { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAFwSURBVCiRnZA7yvJgFISfmMS8SSRfwKQStLVQ96HoDtyC23Eh1kG3IEQIeGksVEQQJDc0l7/yBdt/4BQz58zAHBaLhWi1WnLm87kIgkDUdS3quhZFUYg8z0WapiJNU7FcLoVWVRVZlvHF+/2mqirJVVVFVVXJG40GDf4Dmuu6dDodKTSbTR6PB/v9HgDTNHEcB8dxUBQF27ZRNpuNCMNQms7nM6fTiev1CsBoNGIymTAej2k2m4RhiDYYDOh2u9IUBAG73Y4oigD4+/vj+XzKnr1eD83zPDzPk6Z2u42iKMRxDECWZRRFIfeO46ClaYplWVI0DAPXdfF9HwAhBEmScLvdMAwDy7JQVquVmM1mP52OxyOXywWAKIrYbrd8Ph8AptMp2v1+/3mn7/vYtk2/3wcgSRLW6zWHw4GyLBkOh2jfhC9M08Q0zZ8OZVkSxzFFUZDnOVpZlrxeL3mk6zq6rqNpmuS2beM4DkVRoKoq/wB0JJjdEi8FQAAAAABJRU5ErkJggg==) repeat; }

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
#jquery-lightbox { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; line-height: 0; text-align: center; }
    #jquery-lightbox a img { border: none; }
#lightbox-container-image-box { position: relative; width: 250px; height: 250px; margin: 0 auto; border-radius: 5px 5px 0 0; background-color: #fff; }
#lightbox-container-image { padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; width: 100%; height: 25%; line-height: 0; text-align: center; }
#lightbox-nav { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none; }
#lightbox-nav-btnPrev,
#lightbox-nav-btnNext { display: block; width: 49%; height: 100%; zoom: 1; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { overflow: auto; width: 100%; margin: 0 auto; padding: 0 10px 0; border-radius: 0 0 5px 5px; background-color: #fff; font: 12px/1.5em Verdana,'\5b8b\4f53',sans-serif; }
#lightbox-container-image-data { padding: 0 10px; color: #666; }
    #lightbox-container-image-data #lightbox-image-details { float: left; width: 70%; text-align: left; }
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; color: #999; }
#lightbox-secNav-btnClose { float: right; width: 30px; padding-bottom: 0.7em; }

.home-about{ padding:50px 0 0 0; }
    .home-about .about-title{ text-align:center }
        .home-about .about-title img{ display:block; max-width:80%; margin:0 auto; }
        .home-about .about-body { font-size: 18px; }
    .home-about .about-body p{ line-height:1.5em; }

    .home-about .about-link{ display:flex; padding:50px 15%; }
    .home-about .about-link > div{ width:25%; text-align:center; }
    .home-about .about-link a.icon{ display:block; transition:all 0.6s; margin:0 auto; width:143px; height:143px; text-align:center; background:url(../site/home-about-icon-bg.png) center center no-repeat; }
    .home-about .about-link a.icon img{ width:90px; height:70px; margin-top:36px; }
        .home-about .about-link h2 { padding: 20px 0 0 0; margin: 0; }
            .home-about .about-link h2 a { font-size: 28px; color: #03b4ff; text-decoration:none; font-weight:normal; }
            .home-about .about-link > div:hover .icon { transform: rotate(360deg); }
            .home-about .about-link > div:hover h2 a{ text-decoration:underline; }

.home-services{ padding:30px 0;}
.home-services .tit{ text-align:center; margin-bottom:50px; }
    .home-services .tit img{ display:block; max-width:80%; margin:0 auto; }

    .home-indust { padding: 30px 0; }
    .home-indust .tit{  margin-bottom:30px; padding-left:120px }
    .home-indust .img { text-align: center; }
    .home-indust .img img{ width:100%; }

.home-contact{  padding-top:30px; position:relative; margin-bottom:30px; }
.home-contact .tit{ text-align:center; margin-bottom:30px; }
    .home-contact .imgs{ position:relative; padding-bottom:30px; }
    .home-contact .bg { background-color: #9AE1FF; height:70%; width:100%; position:absolute; left:0; bottom:0; z-index:-1; }
    .home-contact .list{ display:flex; }
    .home-contact .list .item{ width:33.33%; position:relative; }
        .home-contact .list .item a { display: block; width: 100% }
        .home-contact .list .item img{ display:block; width:100%; }
        .home-contact .list .item span { display: block; width: 100%; background-color: rgba(0,0,0,0.6); line-height: 60px; position: absolute; left: 0; bottom: 0; color:#fff; text-align:center; font-size:20px }
        .home-contact .list .item a:hover span{ line-height:120px; }

.banner img{ display:block; width:100%; }

.plug-about-background { padding: 50px 0; }
    .plug-about-background .container { display: flex; align-items: center; }
    .plug-about-background .img{ margin-right:20px; width:42%; }
    .plug-about-background .img img{ display:block; width:100%; }
    .plug-about-background .main-body { flex: 1; margin-right: 50px; padding-left: 20px; box-sizing: content-box; }
        .plug-about-background .main-body .title { font-size: 2rem; color: #03b4ff; font-weight:500; }

.plug-about-history { background:url(about-history-bg.jpg) top center no-repeat;  padding: 80px 0; box-sizing: content-box; margin-bottom:60px; }
    .plug-about-history .container{  }
    .plug-about-history .main-box { display: flex; box-sizing:content-box; }
        .plug-about-history .main-box .img { width: 42.833333%; background: url(/site/about-history-img.jpg) left top no-repeat; }
        .plug-about-history .main-box .img img{ display:block; }
        .plug-about-history .main-box .ct { width: 2.166666%; }


    .plug-about-history .main-body { flex: 1; box-shadow: 0 0 10px rgba(0,0,0,0.4); background-color: #fff; padding-left: 50px; margin-right:2.1666%; box-sizing:border-box; position:relative; }
        .plug-about-history .main-body .title { font-size: 2rem; color: #03b4ff; font-weight: 500; }
    .plug-about-history .main-body-warper { width: 100%; padding-right:100px; padding-bottom:60px }


.plug-about-business{ margin-bottom:60px; }
.plug-about-business .container { position:relative; }
    .plug-about-business .img{ width:70%; }
    .plug-about-business .img img{ display:block; width:100%; }
    .plug-about-business .main-body { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 50px 0; background-color: rgba(220,220,220,0.5); width: 40%; padding-left: 12%; box-sizing: border-box; }
        .plug-about-business .main-body .title { font-size: 2rem; color: #03b4ff; font-weight: 500; }

.plug-services-logi h2.title, .plug-services-tech .title, .plug-services-proc .title, .plug-services-manu h2.title, .plug-services-qual h2.title { display: inline-block; padding: 0 60px; line-height: 60px; background-color: #03b4ff; color: #fff; font-size: 1.2rem; margin: 0; }

.plug-services{ padding:50px 0; margin-bottom:50px; }
    .plug-services .container{ display:flex; overflow:visible; }
    .plug-services .item { width: 20%; margin: 0 0.6%; text-align: center; position: relative; }
        .plug-services .item a { display: block; border: 2px dashed #03b4ff; border-radius: 10px; padding-top: 10%; text-decoration: none; padding-bottom:80%; }
        .plug-services .item h2 { font-size: 1.2rem; color: #03b4ff; }
        .plug-services .item .icon{ width:40%; margin:0 auto; transition:all 0.5s; }
        .plug-services .item .photo { position: absolute; transition: all 0.5s; width: 86%; left: 50%; transform: translateX(-50%); z-index:9999; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); border-radius: 2px; }
        .plug-services .item a:hover .icon{ transform:rotate(360deg); }
        .plug-services .item a:hover .photo{ width:96%; }


.plug-services-tech{ position:relative; margin-bottom:40px; }
    .plug-services-tech .bg { position: absolute; top: 0; left: 0; z-index:-1; width: 100%; height: 100%; border-top: 60px solid #fff; border-bottom:20px solid #fff; box-sizing: border-box; background-color: #D9F4FF }
    .plug-services-tech .container { display: flex; }

    .plug-services-tech .img{ width:43%; }
    .plug-services-tech .box { flex: 1; position:relative; padding-top:60px; }
    .plug-services-tech .title { position:absolute; top:0; right:0;}
.plug-services-tech .body{ position:relative; height:100%; }
    .plug-services-tech .body-warper{ width:100%; position:absolute; left:8%; top:50%; transform:translateY(-50%); }


.plug-services-proc{ margin-bottom:50px; }
    .plug-services-proc .container { display: flex }
    .plug-services-proc .text { flex: 1; padding-right:20px; padding-top:60px; }
    .plug-services-proc .img-box { width:72%; }
    .plug-services-proc .imgs { display: flex; flex-wrap: wrap; width:100% }
        .plug-services-proc .imgs div { width: 50%; box-sizing: border-box; padding-right:16px; padding-bottom:16px; }
        .plug-services-proc .imgs img {  display: block; width:100%; }

.plug-services-logi{ margin-bottom:60px; }
.plug-services-logi .container{ display:flex; }
.plug-services-logi .img{ width:56%; }
.plug-services-logi .img img{display:block; width:100%; }
.plug-services-logi .body{ flex:1; }

.plug-services-logi .text{ padding-left:2rem; padding-top:2rem; }

.plug-services-manu { margin-bottom:60px; position:relative }
    .plug-services-manu .bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; background-color: #E5F7FF; box-sizing:border-box; border-top:60px solid #fff; }

.plug-services-manu .body{display:flex; padding:60px 0; align-items:center;}
    .plug-services-manu .body .text{ padding-right:60px; flex:1; }
    .plug-services-manu .body .img { width: 45%; }
    .plug-services-manu .body .img img{ display:block; width:100%; }

.plug-services-manu2{ margin-bottom:60px; }
.plug-services-manu2 .container{display:flex; align-items:center; }
.plug-services-manu2 .img{ width:50%; }
    .plug-services-manu2 .img img{ display:block; width:100% }
.plug-services-manu2 .text{ flex:1; padding-left:4em; }

.plug-services-qual{ margin-bottom:60px; }
    .plug-services-qual .container { position: relative; padding-top: 60px; }
    .plug-services-qual h2.title { position: absolute; top: 0; right: 0; }


@media (max-width: 1200px) {
    .container { width: 100%; }
    .plug-about-history .container { }
    .plug-about-history .main-box .ct { display: none; }
    .plug-about-history .main-box .img { width: 42.5%; }
}

.plug-indust { background-color: #F2F2F2; border-bottom: 70px solid #03B4FF; }
    .plug-indust .container { display: flex; padding-bottom:60px; justify-content: center; flex-wrap: wrap; }
    .plug-indust .item { width: 20%; position: relative; margin-top: 60px; }
        .plug-indust .item a { display: block; width: 100%; text-align: center; text-decoration: none; position:relative; z-index:10; }
            .plug-indust .item .icon{ display:block; border-radius:50%; width:80%; margin:0 auto; transition:all 0.8s; }
            .plug-indust .item h2 { font-size: 1.5rem; color: #03b4ff; margin:0; padding-top:1em; font-weight:500; }
        .plug-indust .item a:hover .icon{ transform:rotate(720deg); }
        .plug-indust .item .bg {display:block; transform:rotate(-45deg) translateX(-50%) translateY(17%); transform-origin:0 0; border-radius:50% 50% 0 0; width: 80%; height: 100%; position: absolute; left: 10%; top: 0; z-index:0; background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0)); }

.plug-indust-detail{ margin-bottom:50px; }

    .plug-indust-detail .container > h2.tit { color: #03b4ff; }
.plug-indust-detail .body{ margin-bottom:20px; }
.plug-indust-detail .pro-list{ display:flex; flex-wrap:wrap; border-bottom:2px solid #e2e2e2; }
    .plug-indust-detail .pro-list .item { width: 30%; margin-left: 2.5%; margin-bottom: 3%; text-align: center }
    .plug-indust-detail .pro-list .item img{ border:10px solid #03B4FF; width:80%; margin:0 auto; }

.plug-contact{ padding:50px 0; }
.plug-contact .container{ display:flex; justify-content:center; }
.plug-contact .item{ margin:0 2%; text-align:center; }
    .plug-contact .item a { color: #03B4FF; text-decoration: none; }
    .plug-contact .item .icon { border: 4px solid #03B4FF; border-radius: 50%; padding: 2px; transition:all 0.8s; }
    .plug-contact .item a:hover .icon{ transform:rotate(360deg);  }

.plug-contact-sh{ margin-bottom:50px; }
.plug-contact-sh .container{ background:url(contact-bg-sh.jpg) right top no-repeat; height:450px; position:relative; }
.plug-contact-sh .body{ position:absolute; top:100px; right:50px; width:500px; }

.plug-contact-tw { margin-bottom: 50px; }
    .plug-contact-tw .container { background: url(contact-bg-tw.jpg) left top no-repeat; height: 450px; position: relative; }
    .plug-contact-tw .body { position: absolute; top: 100px; left: 50px; width: 500px; }

.plug-contact-jp { margin-bottom: 50px; }
    .plug-contact-jp .container { background: url(contact-bg-jp.jpg) right top no-repeat; height: 450px; position: relative; }
    .plug-contact-jp .body { position: absolute; top: 100px; right: 50px; width: 500px; }

@media (max-width: 800px) {
    .plug-about-history .main-box .ct { display: none; }
    .plug-about-history .main-box .img { display: none; }
    .plug-about-history .main-body { width: 90%; margin: 0 0 0 5%; padding: 0; box-sizing: content-box; }
    .plug-about-history .main-body-warper { width: 100%; padding-left: 40px; margin: 0 auto; position: static; top: auto; transform: translateY(0); }

    .plug-about-business .img { margin-left:-18%; }
    .plug-about-business .main-body{ width:55%; }

    .plug-about-background .container { flex-direction: column; }
    .plug-about-background .img { width: 60%; }

    .plug-services-proc .imgs div { width: 80%; padding-right: 0; }

    .plug-indust .item { width: 30%; }

    .plug-indust-detail .pro-list .item{ width:46.5%; }
}

.popup-menu{ position:fixed; left:0; top:0; height:100%; width:100%; background-color:rgba(250,250,250,0.95); z-index:999999999; display:none; }
.popup-menu-container { display: flex; flex-direction: column; height: 100%; width: 100%; }
.popup-menu .header { display: flex; height: 66px; background-color: #fff; }
    .popup-menu .header .logo { flex: 1; text-align: center; padding-top: 8px; }
    .popup-menu .header .close { width: 44px; height: 66px; margin-right: 20px; margin-top:11px; }
    .popup-menu .header .close span{ display:inline-block; width:44px; height:44px; font-size:20px; color:#03B4FF; line-height:44px; text-align:center }

    .popup-menu .list { flex: 1; }
        .popup-menu .list ul { list-style: none; border-top: 1px solid #03B4FF; padding: 0; margin: 0; }
        .popup-menu .list .item { height: 4rem; line-height: 4rem; border-bottom: 1px solid #03B4FF; display: flex; }
            .popup-menu .item a { display: flex; color: #03B4FF; text-decoration: none; flex: 1; padding-left: 3em; }
            .popup-menu .item img { width: 2rem; height: 2rem; margin-top:1rem; margin-right:1rem; }
            .popup-menu .item b { font-size: 1.3rem; }
            .popup-menu .item a span { padding-left: 20px; font-size:0.8rem; }
            .popup-menu .item .icon { width: 2rem; height: 2rem; margin-top:1rem; background: url(popup-menu-arrow.png) center center no-repeat; }

.popup-menu .lang-list{ text-align:center; }
    .popup-menu .lang-list ul{ list-style:none; padding:0; display:flex; }
    .popup-menu .lang-list li{ width:33.33%; }
        .popup-menu .lang-list li a {display:block; width:90%; margin-left:5%; font-size:0.8rem; text-decoration:none; line-height: 2.5rem; background-color: #03B4FF; color: #fff; text-align: center; border-radius:10px; }

.back-top { width: 50px; height: 50px; border-radius: 50%; background-color: #03B4FF; padding:10px; box-sizing:border-box; position:fixed; right:20px; bottom:100px; z-index:9999999; border:1px solid #fff; opacity:0; transition:opacity 0.4s; }
    .back-top img{ width:100%; height:100%; display:block; cursor:pointer; }
    #roll.show{ opacity:1; }